<!--
 * @Descripttion:  
 * @version: 
 * @Author:Hui
 * @Date: 2023-10-12 15:26:04
 * @LastEditTime: 2023-10-19 10:41:10
 * @LastEditors:Hui
-->

<template>
  <popup-bottom ref="popup" title="评估详情">
    <template #default>

      <scroll-view scroll-y class="container">
        <block v-if="evaluateProduct.skuAttrs && evaluateProduct.skuAttrs.length">
          <view class="title">SKU选项</view>
          <view
            class="item"
            v-for="item in evaluateProduct.skuAttrs || []"
            :key="item.attrId"
          >
            <view class='label u-one-line'>{{item.attrName}}</view>
            <view class='value u-one-line'>{{item.valueContent}}</view>
          </view>
        </block>
        <block v-if="evaluateProduct.evaluateItems && evaluateProduct.evaluateItems.length">
          <view class="title">评估选项</view>
          <view
            class="item"
            v-for="item in evaluateProduct.evaluateItems"
            :key="item.skuItemId"
          >
            <view class='label u-one-line'>{{item.itemName}}</view>
            <view class='value u-one-line'>{{item.valueName}}</view>
          </view>
        </block>
      </scroll-view>

    </template>
  </popup-bottom>
</template>

<script>


export default {
  props: {
    evaluateProduct: { type: Object, default: {} },
  },

  methods: {
    onOpen() {
      this.$refs.popup.open()
    },

    onClose() {
      this.$refs.popup.close()
    }
  }
}
</script>

<style lang="scss" scoped>

.container{
  font-size: 30rpx;
  max-height: 700rpx;
  padding-bottom: 30rpx;
  .title{
    padding: 20rpx 30rpx;
    font-weight: bold;
  }
  .item {
    padding: 20rpx 30rpx;
    font-size: 28rpx;
    color: #666;
    display: flex;
    justify-content: space-between;
    .label {
      width: 300rpx;
    }

    .value {
      color: #333;
      text-align: right;
      width: 360rpx;
      line-height: 30rpx;
    }
    
  }
}

</style>